Types of Input Tags in HTML5

Input Color Type

This type is used for picking a color

<input type="color" name="mycolor" />

Input Date Type

This type is used for picking the date from a PopupCalender or you can type it in. You can also set the calendar date of a time span via the "min" and "max" properties of this tag with type="date".

<input type="date" name="mydate" />

This type is picking the date from a PopupCalender and time by arrow keys in control or you can type both in.

<input type="datetime-local" name="mydateTimeLocal"/>

This type is used for picking the month and year from the PopupCalender.

<input type="month" name="mymonth"/>

This type is used for an input field that will contain only numeric values.

You can also set the min and max value in this type.

<input type="number" name="mynumber" min="1" max="5"/>

It’s a Slider control, if you don’t want to type it in then you can select the value via the slider. You need to give the min and max values of this type.

<input type="range" name="myrange" min="1" max="5"/>

This type is used for selecting the time by the user.

<input type="time" name="mytime" />

This type is used for selecting the week of a specific year.

<input type="week" name="myweek" />

Bind Datalist with input Tag in place of the select tag

Bind a list of data with an input tag without using the select tag.